<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				font-size: 20px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfc;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				/*定位position
				 		-定位是一种更加高级的布局手段
				 		-通过定位可以将元素摆放到页面的任意位置
				 		-使用position属性来设置定位
				 		  可选值：
				 		      static：默认值，元素是静止的没有开启定位
				 		      relative 开启元素的相对定位
				 		      absoulate  开启元素的绝对定位
				 		      fixed 开启元素的固定定位
				 		      sticky  开启元素的粘滞定位
				 		      
				 		    -相对定位
				 		       -当元素的position属性值设置为relative时则开启了元素的相对定位
				 		       -相对定位的特点：
				 		         1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何改变
				 		         2.相对定位是参照于在文档流中的位置进行定位的
				 		         3.相对定位会提升元素的层级
				 		         4.相对定位不会使元素脱离文档流
				 		         5.相对定位不会改变元素的性质，块还是块，行内还是行内
				 		         
				 		       -偏移量（offset）
				 		         当元素开启了相对定位以后，可以通过偏移量来设置元素的位置
				 		          top
				 		            -定位元素和定位位置上边的距离
				 		           bottom
				 		            -定位元素和定位位置下边的距离
				 		            
				 		             -定位元素吹垂直房此昂的位置由top和bottom两个属性来决定
				 		              通常情况下我们只会使用其一
				 		              -top值越大，定位元素越向下移动
				 		              -bottom值越大没定位元素越向上移
				 		              
				 		             left
				 		             -定位元素和定位位置左侧的距离
				 		             right
				 		             -定位元素和定位位置的右侧距离
				 		             
				 		             -定位元素水平方向的位置由left和bottom粮食属性值控制
				 		             
				 		                                        通常只会使用其一
				 		                     left越大越靠右
				 		                     right越大越靠左
				 		    */
				 		   position:relative;
				 		   
				 		   left:200px;
				 		   top:-200px;
			}
			.box3{
				height: 200px;
				width: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>
